<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{asset('js/element.css')}}">
    <script src="{{asset('js/vue.js')}}"></script>
    <script src="{{asset('js/element.js')}}"></script>
    <script src="{{asset('js/jquery.js')}}"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>防疫填写表</title>
</head>
<body>
<div id="form">
    <h3 class="title">{{ $cate['title'] }}</h3>
    <div class="desc">
        <p>接上级疫情防控要求,为研学活动师生安全,及时掌握相关情况,组织方需排查师生生活轨迹是否涉及相关区域.请全体参加本次研学的学生及家长如实填写,如因虚假填报造成严重后果,将依法追求相关责任.</p>
    </div>
    <div>截止时间: {{ $cate['end_time'] }}</div>
    <div>
        <el-form label-position="top" :rules="rules" ref="form" label-width="80px" :model="form">
            <el-form-item label="01 学生姓名" prop="studentName">
                <el-input placeholder="请输入学生姓名" v-model="form.studentName"></el-input>
            </el-form-item>
            <el-form-item label="02 学生性别" prop="studentSex">
                <el-radio-group v-model="form.studentSex">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="03 学校" prop="school">
                <el-input placeholder="请输入学校(简称即可)" v-model="form.school"></el-input>
            </el-form-item>
            <el-form-item label="04 年级" prop="grade">
                <el-input placeholder="请输入年级(数字即可)" v-model="form.grade"></el-input>
            </el-form-item>
            <el-form-item label="05 家长姓名" prop="parentName">
                <el-input placeholder="请输入家长姓名" v-model="form.parentName"></el-input>
            </el-form-item>
            <el-form-item label="06 家长联系电话" prop="phone">
                <el-input placeholder="请输入家长联系电话" type="tel" v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="07 家庭住址" prop="address">
                <el-input placeholder="方便我们安排接送大巴,请写 园区/新区 某小区即可" v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="08 孩子及家长健康码" prop="healthCodeList">
                <el-upload action="https://upload.qiniup.com" list-type="picture-card"
                           :file-list="form.healthCodeList" ref="upload" :limit="2" :on-success="onHealthSuccess"
                           :on-remove="handleHealthRemove" :data="postData" accept="png,jpg,jpeg">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="09 家长行程码" prop="tourCodeList">
                <el-upload action="https://upload.qiniup.com" list-type="picture-card"
                           :file-list="form.tourCodeList" ref="upload" :limit="2" :on-success="onTourSuccess"
                           :on-remove="handleTourRemove" :data="postData" accept="png,jpg,jpeg">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="10 孩子及家长身份信息" prop="identityList">
                <el-upload action="https://upload.qiniup.com" list-type="picture-card"
                           :file-list="form.identityList" ref="upload" :limit="2" :on-success="onIdentitySuccess"
                           :on-remove="handleIdentityRemove" :data="postData" accept="png,jpg,jpeg">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>
<script type="text/javascript">
    var token = "{{$token}}";
    console.log(token);
    var form = new Vue({
        el: "#form",
        data: {
            postData: {
                token: token
            },
            qiniuUrl: "http://qy5b5wunl.hd-bkt.clouddn.com/",
            form: {
                category_id: "{{$cate['id']}}",
                studentName: '',
                studentSex: '',
                school: '',
                grade: '',
                parentName: '',
                phone: '',
                address: '',
                healthCodeList: [],
                tourCodeList: [],
                identityList: []
            },
            rules: {
                studentName: [{
                    required: true,
                    message: '请输入学生姓名',
                    trigger: 'bulr'
                }],
                studentSex: [{
                    required: true,
                    message: '请选择学生性别',
                    trigger: 'change'
                }],
                school: [{
                    required: true,
                    message: '请输入学校',
                    trigger: 'bulr'
                }],
                grade: [{
                    required: true,
                    message: '请输入年级',
                    trigger: 'bulr'
                }],
                parentName: [{
                    required: true,
                    message: '请输入家长姓名',
                    trigger: 'bulr'
                }],
                phone: [{
                    required: true,
                    message: '请输入家长联系电话',
                    trigger: 'bulr'
                }],
                address: [{
                    required: true,
                    message: '请输入家庭住址',
                    trigger: 'bulr'
                }],
                healthCodeList: [{
                    required: true,
                    message: '请上传孩子及家长健康码',
                    trigger: 'change'
                }],
                tourCodeList: [{
                    required: true,
                    message: '请上传家长行程码',
                    trigger: 'change'
                }],
                identityList: [{
                    required: true,
                    message: '请上传孩子及家长身份信息',
                    trigger: 'change'
                }],
            }
        },
        methods: {
            submitForm(formName) {
                var that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(that.form)
                        axios.post("{{route('antis')}}", that.form, {
                            headers: {
                                "Content-Type": "application/json;charset=UTF-8",
                                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                            },
                        }).then(res => {
                            console.log(res);
                            that.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            setTimeout(function () {
                                location.reload();
                            }, 2000)
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleHealthRemove(file, fileList) {
                console.log(file, fileList);
            },
            handleTourRemove(file, fileList) {
                console.log(file, fileList);
            },
            handleIdentityRemove(file, fileList) {
                console.log(file, fileList);
            },
            onHealthSuccess(file, fileList) {
                this.form.healthCodeList.push({
                    name: fileList.name,
                    url: this.qiniuUrl + file.key
                });
                console.log(file, fileList);
            },
            onTourSuccess(file, fileList) {
                this.form.tourCodeList.push({
                    name: fileList.name,
                    url: this.qiniuUrl + file.key
                });
                console.log(file, fileList);
            },
            onIdentitySuccess(file, fileList) {
                this.form.identityList.push({
                    name: fileList.name,
                    url: this.qiniuUrl + file.key
                });
                console.log(file, fileList);
            },
        },
    })
</script>

</html>
